<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 
        响应式网页设计媒体查询是实现的重点，这些新增的相对单位以及flex弹性盒布局也很重要
        响应式网页开发出的页面，随着设备大小以及分辨率的不同，会有不同的展示效果
        在缩放页面的时候就能体验到，缩放一下bootstrap官网试试
    -->

    <!--  
        不写这个标签，viewport的宽度默认值为 980px 或者 1024px，这个是根据设备决定的
    -->
    <!--
        width=device-width:  
            设置视口宽度等于设备宽度（其实是设备设置的分辨率的宽度），但当在iphone或者ipad时，手机不管横着还是竖着视口宽度都 =  竖屏时候的宽度，这时会有不能自适应的问题
            设置视口宽度其实就相当于设置了初始缩放比例
        initial-scale=1.0:
            和上面的作用一样，设置的是初始缩放比例，等同于设置视口宽度等于设备宽度
            但在windows phone ie浏览器上，不管横着还是竖着视口宽度都 =  竖屏时候的宽度，这时会有不能自适应的问题
        二者结合可以克服兼容性问题，但是二者不要有冲突
    -->
    <!-- 
        user-scalable=no 不允许用户进行缩放，用户缩放和pc端缩放浏览器一样
        其实用户缩放，改变的就是视口viewport的大小，想想浏览器中，缩小之后，视口像素数变大
        控制台可以通过触控板缩放
    -->
    <!-- 
        <meta name="viewport" 就是适配移动端不同大小和分辨率的设备的
    -->
    <meta name="viewport" content="width=500, initial-scale=1.0, user-scalable=yes">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <!-- 
        link标签引入方式
        media="screen and (max-width: 375px)"
              媒体类型      媒体特性：宽度小于375px时，css被引入
    -->
    <link rel="stylesheet" media="screen and (max-width: 375px)" href="index.css">

    <style>
        /* 第二种引入方式，使用@规则 */
        @import 'index.css' screen and (max-width: 375px);
    </style>

    <style>
        html {
            font-size: 14px;
        }
        * {
            margin: 0;
        }
        p {
            font-size: 14px; 
            /* 
                设备的大小和设置的分辨率不一样，导致呈现的效果不一样
                同样14px的文字，在手机上可能会很小，在pc上却可能很大 
                可以在控制台切换到移动端看看哦
            */
        }
        .wrapper {
            width: 1500px;
            font-size: 20px;
        }
        .demo {
            font-size: 15px;
            /* 
                rem  相对于html元素的font-size大小
                em   相对于本身的font-size大小，font-size属性是可以继承的
            */
            /* 
                vw/vh  ---> 相对于视口而言的，会把视口分成100份
                vmax   ---> 视口宽高中最大的一边分成100份
                vmin   ---> 视口宽高中最小的一边分成100份
            */
            /* width: 50vmin; */
            /* height: 50vh; */
            width: 50vw;
            height: 200px;
            border: 1px solid #000;
            display: inline-block;
            box-sizing: border-box;
        }



        /* 
            css样式里面引入，媒体查询不占用权重
            只是按照规则判断里面书写的样式是否会生效
            and是与的关系
            使用逗号实现或的关系
            其它细节见ppt
        */
        /* @media screen and (max-width: 375px) and (min-width: 300px) { */
        @media screen and (max-width: 375px), (min-width: 600px) {
            /* 视口宽度小于375或者大于600时，里面的css代码起作用 */
            html, body {
                width: 100%;
                height: 100%;
                background-color: red;
            }
        }

        /* 1css像素 != 设备像素 （会根据屏幕设置的分辨率相应的调整）*/
    </style>
</head>
<body>
    <p>今天你吃了吗</p>
    <div class="wrapper">
        <div class="demo"></div>
        <div class="demo"></div>
        <div class="demo"></div>
        <div class="demo"></div>
        <div class="demo"></div>
    </div>
</body>
</html>